<template>
    <div class="backgImage">
        <!-- 人员监控 -->
        <div class="personvidoe">
            <TitleView title="承包商人员统计" :titlemore="true" @titleClick="titleMoreClick"></TitleView>
            <div class="pl32 div1 pr32">
                <div class="div1_div">
                    <img class="div1_div_img" src="../../assets/overview_left_top.png" alt="">
                    <div class="div1_div_p">
                        <p class="div1_div_p1">{{ data1.shenzhou }}</p>
                        <p class="div1_div_p2">西安神舟</p>
                    </div>
                </div>
                <div class="div1_div">
                    <img class="div1_div_img" src="../../assets/overview_left_top.png" alt="">
                    <div class="div1_div_p">
                        <p class="div1_div_p1">{{ data1.jiayun }}</p>
                        <p class="div1_div_p2">佳运油气</p>
                    </div>
                </div>
                <div class="div1_div">
                    <img class="div1_div_img" src="../../assets/overview_left_top.png" alt="">
                    <div class="div1_div_p">
                        <p class="div1_div_p1">{{ data1.xianlin }}</p>
                        <p class="div1_div_p2">西安咸林</p>
                    </div>
                </div>
                <div class="div1_div">
                    <img class="div1_div_img" src="../../assets/overview_left_top.png" alt="">
                    <div class="div1_div_p">
                        <p class="div1_div_p1">{{ data1.zhongyuan }}</p>
                        <p class="div1_div_p2">中原油田</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 厂区人员统计 -->
        <div class="factoryall">
            <TitleView title="人员实时统计" :titlemore="true" @titleClick="titleMoreClick"></TitleView>
            <div class="pl32" style="height: 265px;">
                <OverviewLeftEcharts :data="data2"></OverviewLeftEcharts>
            </div>
        </div>
        <!-- 厂区人员统计 -->
        <div class="div3">
            <TitleView title="门岗进出人员" :titlemore="true" @titleClick="titleMoreClick"></TitleView>
            <div class="pl32 pt20 pb20 pr20 div3_div">
                <!-- <div class="div3_d">
                    <div class="div3_d_t">{{ data3.aq }}</div>
                    <div class="div3_d_p">安全部</div>
                </div>
                <div class="div3_d">
                    <div class="div3_d_t">{{ data3.zh }}</div>
                    <div class="div3_d_p">综合部</div>
                </div>
                <div class="div3_d">
                    <div class="div3_d_t">{{ data3.zz }}</div>
                    <div class="div3_d_p">装置部</div>
                </div>
                <div class="div3_d">
                    <div class="div3_d_t">{{ data3.cw }}</div>
                    <div class="div3_d_p">财务部</div>
                </div>
                <div class="div3_d">
                    <div class="div3_d_t">{{ data3.dq }}</div>
                    <div class="div3_d_p">党群部</div>
                </div>
                <div class="div3_d">
                    <div class="div3_d_t">{{ data3.sb }}</div>
                    <div class="div3_d_p">设备部</div>
                </div> -->
            </div>
            <div class="pl32 pr20">
                <DataLeft_b :data="data3"></DataLeft_b>
            </div>
        </div>
    </div>

</template>

<script>
import DataLeft_b from './components/DataLeft_b.vue'
import OverviewLeftEcharts from './components/Overview_left_echarts'
import { personal_left } from '@/request/api.js'
export default {
    components: {
        OverviewLeftEcharts, DataLeft_b
    },
    data() {
        return {
            data: {},
            data1: { "shenzhou": 0, "jiayun": "0", "xianlin": 0, "zhongyuan": 0 },
            data2: {
                "time": [],
                "shanggu": [],
                "qita": []
            },
            // data3: { "aq": "0", "zh": 0, "zz": 0, "cw": 0, "dq": 0, "sb": 0 },
            data3: []
        }
    },
    created() {
        this.getData()
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);

        },
        getData() {
            personal_left().then((res) => {
                console.log(res);
                this.data1 = res.data.data1
                this.data2 = res.data.data2
                this.data3 = res.data.data3
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.personvidoe {
    height: 262px;

    .div1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .div1_div {
            display: flex;
            margin-top: 10px;
            margin-bottom: 12px;

            .div1_div_img {
                width: 81px;
                height: 83px;
            }

            .div1_div_p1 {
                font-family: DIN;
                font-weight: bold;
                font-size: 26px;
                color: #00B2FF;
                margin: 0;
                margin-top: 15px;
                background: linear-gradient(180deg, #009CFF 0%, #60C1FF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .div1_div_p2 {
                margin-top: 0;
            }

            .div1_div_p {
                margin: 0;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 14px;
                color: #C3D2E0;
            }
        }



    }
}

.factoryall {
    height: 320px;
}

.div3 {
    .div3_div {
        display: grid;
        grid-template-columns: repeat(3, 33%);
        row-gap: 40px;

    }

    .div3_d {
        width: 82px;
        height: 98px;

        .div3_d_t {
            width: 82px;
            height: 82px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: DIN;
            font-weight: bold;
            font-size: 14px;
            color: #FFFFFF;
            background: url("@/assets/overview_left_yuan.png");
        }

        .div3_d_p {
            text-align: center;
            margin-top: 2px;
            width: 82px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 14px;
            color: #C3D2E0;
        }
    }
}
</style>